<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
	<link rel="stylesheet" href="../res/css/weui.css" />
    <link rel="stylesheet" href="../res/css/weuix.css" />
	<link rel="stylesheet" href="../res/css/common.css" />
	<link rel="stylesheet" href="../res/css/swiper.css">
    <title></title>
	<script src="../res/js/zepto.min.js"></script>
	<script src="../res/js/zepto.weui.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <script src="../res/js/vue.min.js"></script>
	<script src="../res/js/common.js?v=1"></script>
	<script src="../res/js/swiper.js"></script>

    <style>
        body{
            height: 100%;
            overflow-x: hidden;
        }
        #app{
            display: flex;
            flex-direction: column;
            align-items: stretch;
            min-height: 100%;
        }
        .top-bar{
            position: sticky;
            position: -webkit-sticky;
            top: 0;
            z-index: 9;
            box-shadow: 0 0 8px #e0e0e0;
        }

        .swiper-container{
            width: 100vw;
            padding-bottom: 15px;
        }
        .swiper-slide{
            width: 100vw;
            box-sizing: border-box;
        }

        .case-cover{
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 60px;
        }
        .hospital-name-case{
            font-size: 20px;
            font-weight: bold;
        }
        .hospital-logo{
            width: 80px;
            height: 80px;
            padding: 30px 0;
        }
        .patient-info{
            display: grid;
            grid-template-columns: auto;
            row-gap: 14px;
            max-width: 270px;
        }
        .patient-info > div{
            display: flex;
        }
        .text-title{
            flex-shrink: 0;
            padding-right: 5px;
        }
        .text-under-line{
            flex: 1;
            border-bottom: 1px solid #999;
            padding: 0 10px;
            text-align: center;
            word-break: break-all;
            min-width: 100px;
        }
        .tip{
            margin-top: 20px;
            font-size: 14px;
        }

        .case-page{
            overflow: auto;
            position: relative;
        }
        .case-img{
            width: 100%;
            height: auto;
            transition: all .3s;
        }
        .case-img-null{
            margin-top: 100px;
            font-size: 18px;
            font-weight: bold;
            text-align: center;
        }
        .scale-img{
            width: 160%;
            height: auto;
        }

        .pager{
            position: sticky;
            position: -webkit-sticky;
            bottom: 10px;
            left: 0;
            right: 0;
            text-align: center;
            z-index: 18;
        }
    </style>
</head>
<body>
    <section id="app">
        <div class="weui-btn_primary weui-header top-bar">
            <div class="weui-header-left"><a class="icon icon-109" @click="pageBack"></a></div>
            <h1 class="weui-header-title">电子病历</h1>
        </div>

        <div :class="['swiper-container', {'swiper-no-swiping': scaling}]">
            <div class="swiper-wrapper">
                <div class="case-cover swiper-slide">
                    <div class="hospital-name-case">
                        {{dataInfo.hospitalName}}电子病历
                    </div>
                    
                    <img src="../res/images/1.9.1img/hospital.png" class="hospital-logo" alt="">
    
                    <div class="patient-info">
                        <div v-for="item in dataKeys">
                            <span class="text-title">{{item.title}}
                                <span v-if="item.key == 'patientAge'">(岁)</span>
                                <span v-if="item.key == 'patientWeight'">(kg)</span>:
                            </span>
                            <span class="text-under-line">{{dataInfo[item.key]}}</span>
                        </div>
                    </div>

                    <div class="tip">
                        注: (本病历只限医院使用)
                    </div>
                </div>
    
                <div class="case-page swiper-slide" v-for="(item, index) in caseImgs">
                    <img class="case-img" :src="item.blImgUrl" alt="病历页" v-if="item.blImgUrl" @click="toggleScale(index)" :ref="'img-' + index">
                    <div class="case-img-null" v-else>
                        无病历图片
                    </div>
                </div>
            </div>
        </div>

        <div class="pager">
            ( {{page}} / {{total}} )
        </div>
    </section>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            dataId: 0,
            dataInfo: {},

            scaling: false,
            
            casePage: 1,
            caseTotalPage: 0,
            caseImgs: [],

            page: 1,
            total: null,

            // caseImg: '',
            
            marryState: ['未婚', '已婚', '离婚', '丧偶'], //0未婚 1已婚 2离婚 3丧偶
            dataKeys: [
                { title: '姓名', key: 'patientName' },
                { title: '身份证', key: 'patientIdcard' },
                { title: '性别', key: '__genderWord' },
                { title: '年龄', key: 'patientAge' },
                { title: '手机号码', key: 'patientPhone' },
                { title: '婚姻', key: '__marryWord' },
                { title: '体重', key: 'patientWeight' },
                { title: '职业', key: 'patientProfession' },
                { title: '药物过敏史', key: 'patientAllergyDetails' },
            ]
        },
        methods: {
            pageBack(){
                history.back()
            },
            getData(){
                const params = { id: this.dataId },
                that = this

                newAjaxPost('/h5/medicalRecord/getUserRecordsInfo', params, function (res) {
                    that.dataInfo = res.data
                    that.dataInfo.__genderWord = res.data.patientSex == '1' ? '男' : '女'
                    that.dataInfo.__marryWord = that.marryState[res.data.isMarried]

                    // if(res.data.blImgUrl){
                    //     that.caseImg = res.data.blImgUrl
                    // }else{
                    //     that.getOldData()
                    // }
                })

                this.getCasePage()
            },
            // getOldData(){
            //     const params = {
            //         id : this.dataId,
            //         resourceType: 6,
            //         type: 2
            //     },
            //     that = this

            //     newAjaxPost('/h5/pdf/getEstablishPdf', params, function (res) {
            //         that.caseImg = res.data.url
            //     })
            // },
            getCasePage(){
                const params = {
                    current: this.casePage,
                    id: this.dataId,
                    identityCard: this.dataInfo.patientIdcard,
                    size: 7
                },
                that = this;
                newAjaxPost('/h5/medicalRecord/getInquiryLogByUserIdList', params, function (res) {
                    that.caseImgs.push(...res.data.list)
                    that.caseTotalPage = res.data.pages
                    that.total ??= res.data.total + 1
                })
            },
            getNextPage(){
                this.casePage++
                this.getCasePage()
            },
            swiper(){
                const that = this
                new Swiper('.swiper-container', {
                    loop: false,
                    autoplay: false,
                    observer: true,
                    on:{
                        slideNextTransitionEnd: function(){
                            if(this.isEnd && that.casePage < that.caseTotalPage){
                                that.getNextPage()
                            }
                        },
                        slideChangeTransitionStart: function(){
                            that.page = this.activeIndex + 1
                        }
                    }
                })
            },
            toggleScale(index){
                this.scaling = !this.scaling

                const ref = this.$refs['img-' + (index)][0]
                // console.log(ref)

                if(this.scaling){
                    ref.classList.add('scale-img')
                }else{
                    ref.classList.remove('scale-img')
                }
            }
        },
        mounted(){
            this.dataId = getQst('id')
            this.getData()
            this.swiper()
        }
    })
</script>
</html>